<template>
  <div class="home-container">
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <div class="chart-container">
          <!-- 标题 -->
          <div class="chat-title">智能投顾助手</div>
          <!-- 对话历史框 -->
          <div class="chat-history" ref="chatHistory">
            <div
                v-for="(message, index) in messages"
                :key="index"
                :class="['message', message.type === 'user' ? 'user' : '']"
            >
              <div class="message-content">
                {{ message.content }}
              </div>
            </div>
          </div>
          <!-- 输入框和按钮 -->
          <div class="input-container">
            <el-input
                v-model="inputText"
                placeholder="请输入消息"
                @keyup.enter="sendMessageAndClear"
            />
            <el-button type="primary" @click="sendMessageAndClear">发送</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      inputText: '',
      messages: [],
      sessionId: null  // 会话 ID
    };
  },
  methods: {
    async sendMessageAndClear() {
      if (this.inputText.trim() === '') return;

      // 添加用户消息到对话历史
      this.messages.push({ type: 'user', content: this.inputText });

      try {
        // 发送请求到 DRF 后端
        const response = await axios.post('http://localhost:8000/user/chat/', {
          message: this.inputText,
          session_id: this.sessionId  // 传递会话 ID
        });

        // 添加模型返回的消息到对话历史
        const assistantMessage = response.data.message;
        this.messages.push({ type: 'bot', content: assistantMessage });

        // 更新会话 ID
        this.sessionId = response.data.session_id;
      } catch (error) {
        console.error('Error sending message:', error);
        this.messages.push({ type: 'bot', content: 'Failed to get response from server' });
      }

      this.inputText = ''; // 清空输入框
      this.scrollToBottom(); // 滚动到最底部
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatHistory = this.$refs.chatHistory;
        chatHistory.scrollTop = chatHistory.scrollHeight;
      });
    }
  }
};
</script>

<style scoped>
.home-container {
  position: relative;
  padding: 20px;
  height: 80vh;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.chart-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.chart-container {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 新增标题样式 */
.chat-title {
  font-size: 24px; /* 字号大一些 */
  font-weight: bold; /* 字体加粗 */
  margin-bottom: 10px; /* 添加一些间距 */
  text-align: center; /* 水平居中 */
  margin-left: auto; /* 与 margin-right: auto; 配合实现块级元素的水平居中 */
  margin-right: auto;
  width: fit-content; /* 使宽度适应内容，便于居中 */
}

.chat-history {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.message {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
}

.message.user {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 60%;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.message.user .message-content {
  background-color: #007bff;
  color: #fff;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.input-container .el-input {
  flex-grow: 1;
}
</style>